<template>
<div class="fincontain">
  <div class="finbox">
    <ul class="fin_left" >
      <li v-for="(item,index) in coachlist" :key="index">
        <div>
          <el-avatar :size="120" :src="item.img">
            <img src="https://img0.baidu.com/it/u=1799451268,1283400252&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300" alt=""/>
          </el-avatar>
        </div>
        <div>
          <ul style="flex: 1;list-style-type: none;margin: 10px;line-height: 34px">
            <li>教练号：<span style="background-color: #7cc0ff;color: white;padding: 2px 4px;font-weight: 600">{{item.id}}</span>
              <span class="fin_l_span" style="float: right">
              {{timelist[index]}} 年教龄
              </span>
            </li>
            <li>负责场地，科目：
              <span style="background-color: #7cc0ff;color: white;padding: 2px 4px;font-weight: 600">{{item.place}}</span>
              <span style="background-color: #7cc0ff;color: white;padding: 2px 4px;font-weight: 600;margin-left: 10px">{{ item.subject }}</span>
            </li>
            <li>综合评价：<el-rate v-model="item.grade" disabled/></li>
          </ul>
        </div>
        <button class="xqbut" @click="xqquery(index,'0')">详情</button>
      </li>
      <div style="position: absolute;bottom: -20px">
        <el-pagination
          v-model:currentPage="currentPage"
          :page-size="pagesize"
          background
          layout="total, prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </ul>
    <ul class="fin_right">
      <h4><span>热门教练</span></h4>
      <li v-for="(item,index) in besttealist" :key="index">
        <div v-if="index<=3">
          <div>
            <el-avatar :size="80" shape="square" :src="item.img">
              <img src="https://img0.baidu.com/it/u=1799451268,1283400252&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300" alt=""/>
            </el-avatar>
          </div>
          <div>
            <ul style="flex: 1;list-style-type: none;line-height: 26px;margin-left: 10px">
              <li><span class="fin_right_span" @click="xqquery(index,'1')">
              {{item.id}}
            </span></li>
              <li><span>{{ item.mobile }}</span></li>
              <li><el-rate v-model="evalue" disabled/></li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
  <Dialog v-model="queryDialogVisible" :initinforlist="initinforlist" :initevaluations="initevaluations" :initLoginTeaId="initLoginTeaId" v-if="queryDialogVisible"/>
</template>

<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import Dialog from '@/components/query/Qteacher'
import {getAllTeacher, getBestTeacher} from "@/api/teacher";
import {getEvaluationById} from "@/api/evaluation";
import {getStudentById} from "@/api/student";
import {useStore} from "vuex";
const store = useStore()

const currentPage = ref(1)
const pagesize = ref(3)
const total = ref(0)

const coachlist = ref({})
const queryDialogVisible = ref(false)
const besttealist = ref({})
const evalue = ref(5)
const timelist = ref([])

const initinforlist = ref(null)
const initevaluations = ref({})
const initLoginTeaId = ref('')

// 获取当前时间
const UpData=()=>{
  const nowDate = new Date();
  const date = {
    year: nowDate.getFullYear(),
    month: nowDate.getMonth() + 1,
    date: nowDate.getDate(),
  }
  const newmonth = date.month>10?date.month:'0'+date.month
  const day = date.date>10?date.date:'0'+date.date
  return  date.year + '-' + newmonth + '-' + day
}

//热门教练
getBestTeacher().then(res=>{
  if (res.code === 20041){
    besttealist.value = res.data
  }else {
    ElMessage({
      message: '获取信息失败',
      type: 'error',
    })
  }
})

//全部教练
const getcoachlist = async () =>{
  await getAllTeacher({pageNum:currentPage.value,pageSize:pagesize.value}).then(res=>{
    if (res.code === 20041){
      total.value=res.data.total
      coachlist.value = res.data.list
      for (let i = 0;i<coachlist.value.length;i++){
        timelist.value.push(Math.floor((Math.abs(parseInt((new Date(UpData()).getTime() - new Date(coachlist.value[i].date).getTime()) / (1000 * 60 * 60 * 24))))/365))
      }
    }else {
      ElMessage.error('无任何教练')
    }
  })
}
getcoachlist()

const handleCurrentChange = async () =>{
  timelist.value = []
  await getcoachlist()
}

const xqquery = async (index,type) =>{
  initevaluations.value = {}
  await getStudentById(store.getters.Id).then(res=>{
    initLoginTeaId.value = res.data.coachId
  })
  if (type === '0'){
    initinforlist.value = coachlist.value[index]
    await getEvaluationById({pageNum:1,pageSize:99999,id:coachlist.value[index].id}).then(res=>{
      if (res.code === 20041){
        initevaluations.value = res.data.list
      }else {

      }
    })
  }else {
    initinforlist.value = besttealist.value[index]
    initinforlist.value.grade = 5
    await getEvaluationById({pageNum:1,pageSize:99999,id:besttealist.value[index].id}).then(res=>{
      if (res.code === 20041){
        initevaluations.value = res.data.list
      }else {

      }
    })
  }
  queryDialogVisible.value = true
}

</script>

<style scoped>
/**{*/
/*  border: 1px solid blue;*/
/*}*/

.fin_right_span{
  border: 1px solid #4da9ff;
  box-sizing: border-box;
  padding: 2px 10px;
  color: #4da9ff;
  border-radius: 4px;
  transition: color .2s ease,background-color .2s ease;
}
.fin_right_span:hover{
  background-color: #4da9ff;
  color: white;
}
ul{
  list-style-type: none;
}
.fincontain{
  flex: 1;
  overflow: scroll;
  box-sizing: border-box;
  padding: 40px 200px 40px 200px;
  background-color: white;
}
.finbox{
  min-width: 890px;
  min-height: 100%;
  display: flex;
}
.fin_left{
  flex: 0.75;
  min-height: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 20px;
}
.fin_left>li{
  height: 160px;
  display: flex;
  box-sizing: border-box;
  padding: 10px;
  align-items: center;
  border-bottom: 1px solid #d7d7d7;
}
.fin_left>li>div:nth-child(1){
  width: 120px;
  border-radius: 50%;
  height: 120px;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;

}
.fin_left>li div:nth-child(2){
  flex: 1;
  min-width: 160px;
  height: 100%;
}
.fin_left>li button{
  flex: 0.2;
  min-width: 120px;
  height: 40px;
}
.fin_l_span{
  background: url("~@/assets/00.png") repeat-y;
  background-position-x: 0;
  background-position-y: 0;
  background-repeat: repeat-y;
  background-size: auto;
  padding: 0 10px;
  background-position: center 75%;
  background-repeat: no-repeat;
  background-size: contain;
  font-weight: 600;
}
.fin_right{
  flex: 0.25;
  min-width: 260px;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid #d5d5d5;
}
.fin_right h4{
  position: relative;
  height: 60px;
}
.fin_right>h4 span{
  position: absolute;
  top: 50%;left: 0;
  transform: translate(0 ,-50%);
  font-size: 27px;
  font-family: 华文新魏,serif;
}
.fin_right>li>div,
.fin_right>li{
  height: 100px;
  display: flex;
  box-sizing: border-box;
  padding: 10px;
  align-items: center;

}
.fin_right>li>div>div:first-child{
  min-width: 80px;
  border-radius: 50%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;

}
.fin_right>li>div>div:last-child{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 100px;
  height: 100%;
}
/* From uiverse.io by @mrhyddenn */
.xqbut {
  margin: 10px;
  max-width: 60px;
  padding: 10px 20px;
  border-radius: 7px;
  border: 1px solid #7d92ff;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
  background: transparent;
  color: #7d92ff;
  overflow: hidden;
  transition: all 0.2s ease-in;
}

.xqbut:hover {
  background: #7d92ff;
  color: white;
  transition: all 0.2s ease-out;
}

.xqbut:active {
  background: #4d6eff;
}

</style>